<script setup>
import router from '@/router'
// import { ref } from 'vue'
import { setUserStore } from '@/stores/modules/user.js'
import { onMounted } from 'vue'
const userInfo = setUserStore()
onMounted(() => {
  userInfo.getsUserInfo()
})
const handleCommand = async (key) => {
  if (key === 'logout') {
    await ElMessageBox.confirm('确定退出吗？', '温馨提示', {
      type: 'warn',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
    userInfo.removeToken()
  } else {
    router.push('/layout/' + key)
  }
}
defineOptions({
  name: 'AdminLayout'
})
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#232323"
          class="el-menu-vertical-demo"
          :default-active="$route.path"
          text-color="#fff"
          style="height: 100vh"
          router
        >
          <div>
            <img
              src="@/assets/text.png"
              width="150"
              alt=""
              draggable="false"
              style="margin: 0px auto; display: block"
            />
          </div>
          <el-menu-item index="/layout/class">
            <el-icon><Collection /></el-icon>
            <span>文章分类</span>
          </el-menu-item>
          <el-menu-item index="/layout/manager">
            <el-icon><setting /></el-icon>
            <span>文章管理</span>
          </el-menu-item>
          <el-sub-menu index="">
            <template #title>
              <el-icon><location /></el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item index="/layout/basic">
              <el-icon><User></User> </el-icon>
              基本资料
            </el-menu-item>
            <el-menu-item index="/layout/avatar">
              <el-icon><Crop /></el-icon>
              更换头像
            </el-menu-item>
            <el-menu-item index="/layout/update">
              <el-icon><EditPen /></el-icon>
              重置密码
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin: auto;
              align-items: center;
            "
          >
            <span>
              黑马程序员：<b v-if="userInfo.userInfo"
                >{{ userInfo.userInfo.username }}
              </b>
            </span>
            <el-dropdown
              size="large"
              style="margin-right: 20px"
              @command="handleCommand"
              :hide-on-click="false"
            >
              <template v-if="userInfo.userInfo">
                <el-icon size="50" v-if="!userInfo.userInfo.user_pic"
                  ><userFilled></userFilled
                ></el-icon>
                <img
                  v-else
                  :src="userInfo.userInfo.user_pic"
                  width="50"
                  height="50"
                  alt=""
                  style="border-radius: 50%"
                />
              </template>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="basic">
                    <el-icon><user /></el-icon>基本资料
                  </el-dropdown-item>
                  <el-dropdown-item command="avatar">
                    <el-icon><Crop /></el-icon>更换头像
                  </el-dropdown-item>
                  <el-dropdown-item command="update">
                    <el-icon><EditPen /></el-icon>重置密码
                  </el-dropdown-item>
                  <el-dropdown-item command="logout">
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main style="background: #f5f5f5">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
main > div {
  height: 100%;
}
</style>
